<template>
	<view class="content">
		<!-- l-head -->
		<view class="l-head">
			<view class="l-search">
				<image class="l-icon-search" src="../../static/l-icon-search.png" mode=""></image>
				<!-- <input @blur="cleadSearch" v-model="serachValue" @input="onInput"  type="text" class="l-search-input" value="" placeholder="精彩热搜：金光布袋戏《羽国志异》" placeholder-class="l-holder" /> -->
				<input v-model="serachValue" @input="onInput"  type="text" class="l-search-input" value="" placeholder="精彩热搜：金光布袋戏《羽国志异》" placeholder-class="l-holder" />
			</view>
			<button @tap="toSearch" style="background-color: #007AFF;height: 60rpx;line-height: 60rpx;font-size: 20rpx;width: 75rpx;">搜 索</button>
		</view>
		<view v-if="searchData.length>0" style="padding: 20rpx 32rpx 0rpx 32rpx;">
			<view @tap="navtoDetail(item.Id)" style="height: 60rpx;font-size: 30rpx;" v-for="(item,index) in searchData">
				{{item.title}}&#8194;-&#8194;{{item.author}}
			</view>
		</view>
		<view class="l-body">

			<!-- l-swiper -->

			<swiper class="l-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" indicator-color="var(--c-bg-2)"
			 indicator-active-color="#41bdb2" circular @tap="$toast(`轮播图`)">
				<swiper-item>
					<view class="l-swiper-item">
						<image class="l-carousel-img" :src="img" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="l-swiper-item">
						<image class="l-carousel-img" :src="img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>

			<view class="l-body-tab">
				<view class="l-tab-item" @tap="$toast(`../search/search?type=3&value=1`)">
					<image class="l-tab-item-img l-tab-item-img-1" src="../../static/book-mall/l-icon-book-mall-1.png" mode=""></image>
					<view class="l-tab-item-value">
						总榜
					</view>
				</view>
				<view class="l-tab-item" @tap="$toast(`../search/search?type=5&value=1`)">
					<image class="l-tab-item-img l-tab-item-img-2" src="../../static/book-mall/l-icon-book-mall-2.png" mode=""></image>
					<view class="l-tab-item-value">
						新书
					</view>
				</view>
				<view class="l-tab-item" @tap="$toast(`../search/search?type=6&value=1`)">
					<image class="l-tab-item-img l-tab-item-img-3" src="../../static/book-mall/l-icon-book-mall-3.png" mode=""></image>
					<view class="l-tab-item-value">
						月榜
					</view>
				</view>
				<view class="l-tab-item" @tap="navtoClssify">
					<image class="l-tab-item-img l-tab-item-img-4" src="../../static/book-mall/l-icon-book-mall-4.png" mode=""></image>
					<view class="l-tab-item-value">
						分类
					</view>
				</view>
			</view>

		</view>

		<view class="l-view">
			<view class="l-h3">
				<text class="l-h3-title">最新热门</text>
				<view class="l-h3-more" @tap="loadHotBooks()">换一换<image class="l-icon-refresh" src="../../static/book-mall/l-icon-refresh.png"
					 mode=""></image>
				</view>
			</view>
				
			<view class="l-dl" v-for="(s,i) in newHotBooksList" :key="i" @tap="navtoDetail(s.Id)">
				<image class="l-dt" :src="s.photo" mode="aspectFill"></image>
				<view class="l-dd">
					<view class="l-dd-title">
						{{s.title}}
					</view>
					<view class="l-dd-content">
						{{s.synopsis}}
					</view>
					<view class="l-dd-footer">
						{{s.author}}
					</view>
				</view>
			</view>
		</view>

		<view class="l-view">
			<view class="l-h3">
				<text class="l-h3-title">喜欢热榜</text>
				<!-- <view class="l-h3-more" @tap="$toast(`最新上架的查看全部`)">查看全部<image class="l-icon-more" src="../../static/l-icon-more.png"
					 mode="widthFix"></image>
				</view> -->
			</view>
			<view class="l-dl-view" v-for="(s,i) in likeBooksList" :key="i" @tap="navtoDetail(s.Id)">
				<view class="l-dl-bg"></view>
				<view class="l-dl-content">
					<image class="l-dt-view" :src="s.photo" mode="aspectFill"></image>
					<view class="l-dd-view">
						<view class="l-dd-view-content" style="height: 130rpx;">
							<view class="l-dd-view-title">
								<view class="l-dd-view-ta">
									{{s.title}}
								</view>
								<view class="l-dd-view-tb">
									{{s.author}}
								</view>
							</view>
							<image class="l-icon-dot" src="../../static/l-icon-dot.png" mode="widthFix"></image>
						</view>
						<view class="l-dd-view-footer">
							{{s.synopsis}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="l-view l-view-not-border">
			<view class="l-h3">
				<text class="l-h3-title">热门分类</text>
				<view class="l-h3-more" @tap="navtoClssify">全部分类<image class="l-icon-more" src="../../static/l-icon-more.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="l-list-classify">
				<view class="l-list-item" v-for="(item,index) in hotClassList" :key="index"  @tap="getClassBook(item.id)">
					<view class="l-item_view">
						<view class="l-item__value">
							<view class="l-item__value-title">
								{{item["name"]}}
							</view>
							<view class="l-item__value-sub">
								{{item["sum"]}}本
							</view>
						</view>
						<image class="l-img-classify" src="../../static/classify/l-img-classify-1.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import { getNewBooks,searchBook,getHotClassify,getWeekTop,getLikeTop } from "../../utils/api.js"
	export default {
		data() {
			return {
				title: 'Hello',
				img: `../../static/152b74dd6eb4c583fd8921a3f634b5dc.jpg`,
				bookimg: `../../static/152b74dd6eb4c583fd8921a3f634b5dc.jpg`,
				serachValue: '',
				cover: `../../static/152b74dd6eb4c583fd8921a3f634b5dc.jpg`,
				searchData: [],
				hotClassList: [],
				newHotBooksList: [],
				likeBooksList: [],
				newHotPage: 1,
				likePage: 1
			}
		},
		onLoad() {
			getHotClassify((data) => {
				this.hotClassList = data.data
			})
			this.loadHotBooks();
			this.loadLikeBooks();
		},
		methods: {
			loadLikeBooks(){
				getLikeTop(this.likePage, (data) => {
					this.likeBooksList = data.data
				})
				this.likePage++;
				if (this.likePage>=3) this.likePage=1
			},
			loadHotBooks(){
				getWeekTop(this.newHotPage, (data) => {
					this.newHotBooksList = data.data
				})
				this.newHotPage++;
				if (this.newHotPage>=5) this.newHotPage=1
			},
			getClassBook(id){
				uni.navigateTo({
					url: `/pages/search/search?type=2&value=`+id
				})
			},
			onInput(e){
				this.serachValue = e.detail.value
				if (this.serachValue==""){
					this.searchData = [];
					return;
				}
				searchBook(this.serachValue, (data)=>{
					this.searchData = data.data
				})
			},
			navto() {
				uni.navigateTo({
					url: `/pages/book-mall/book-mall`
				})
			},
			navtoClssify() {
				uni.navigateTo({
					url: `/pages/classify/classify`
				})
			},
			navtoDetail(bid) {
				uni.navigateTo({
					url: `/pages/detail/detail?bookid=`+bid
				})
			},
			cleadSearch(){
				this.searchData = []
			},
			toSearch(){
				uni.navigateTo({
					url: `/pages/search/search?type=1&value=`+this.serachValue
				})
			}
		}
	}
</script>

<style>
	/* l-body-tab */

	.l-body-tab {
		display: flex;
		margin: 20rpx 0 0;
		align-items: center;
		white-space: nowrap;
		justify-content: space-around;
	}

	.l-tab-item-img {
		margin-bottom: 10rpx;
	}

	.l-tab-item-img-3,
	.l-tab-item-img-1 {
		width: 60rpx;
		height: 58rpx;
	}

	.l-tab-item-img-2 {
		width: 52rpx;
		height: 56rpx;
	}

	.l-tab-item-img-4 {
		width: 54rpx;
		height: 54rpx;
	}

	.l-tab-item-value {
		text-align: center;
		font-size: 26rpx;
		color: var(--c-txt-2);
	}

	/* l-view */

	.l-view {
		padding: 40rpx var(--pad-lr);
		border-bottom: 1rpx solid #222337;
	}

	.l-view-not-border {
		padding-bottom: 0;
		border-bottom: none;
	}

	.l-h3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-h3-title {
		font: bold var(--f-size-5) normal;
	}

	.l-h3-more {
		display: flex;
		align-items: center;
		color: var(--c-bg-2);
	}

	.l-icon-refresh {
		width: 33rpx;
		height: 25rpx;
		margin-left: 12rpx;
	}

	.l-icon-dot {
		width: 30rpx;
		margin-top: 10rpx;
	}

	.l-dl {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
	}

	.l-dt {
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.l-dd {
		width: 70%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-title {
		color: var(--c-txt-3);
		font: var(--f-size-3) normal;
	}

	.l-dd-content,
	.l-dd-footer {
		color: var(--c-txt-2);
		font: var(--f-size-2)/var(--f-size-4) normal;
	}

	.l-dd-view-footer,
	.l-dd-content {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.l-dd-view-footer {
		color: #868DAB;
		font-size: var(--f-size-1);
		-webkit-line-clamp: 2;
	}

	.l-dd-content {
		-webkit-line-clamp: 3;
	}

	.l-dd-footer {
		display: flex;
		align-items: center;
	}

	.l-dd-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}


	/* l-dl-view */

	.l-dl-view {
		position: relative;
		height: 282rpx;
		margin-top: 32rpx;
	}

	.l-dl-bg {
		height: 250rpx;
		background: rgba(34, 35, 55, 1);
		box-shadow: 0px 30px 60px 0px rgba(17, 21, 26, 0.1);
		border-radius: 20rpx;
		position: absolute;
		/* top: 32rpx; */
		left: 0;
		width: 100%;
	}

	.l-dl-content {
		position: relative;
		z-index: 1;
		display: flex;
		padding: 0 rpx;
	}

	.l-dt-view {
		width: 168rpx;
		height: 250rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.l-dd-view {
		width: calc(100% - 198rpx);
		padding: 10rpx 10rpx 10rpx 0rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-view-content {
		display: flex;
		justify-content: space-between;
	}

	.l-dd-view-title {
		width: calc(100% - 62rpx);
		border-bottom: 1rpx solid #5D637C;
	}

	.l-dd-view-ta,
	.l-dd-view-tb {
		width: 100%;
		overflow: hidden;
		white-space: normal;
		text-overflow: ellipsis;
	}

	.l-dd-view-ta {
		font: bold var(--f-size-3) normal;
	}

	.l-dd-view-tb {
		color: #5D637C;
		padding: 14rpx 0 25rpx;
		font-size: var(--f-size-1);
	}

	/* l-classify */

	.l-list-classify {
		padding: 32rpx 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.l-list-item {
		width: 330rpx;
		height: 160rpx;
		background-color: #F5F7F9;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.l-item_view {
		width: calc(100% - 64rpx);
		height: 122rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-item__value-title {
		font-size: var(--f-size-2);
		color: #2B3133;
		margin-bottom: 12rpx;
	}

	.l-item__value-sub {
		font-size: var(--f-size-1);
		color: #95A1A6;
	}

	.l-img-classify {
		width: 98rpx;
		height: 100%;
	}
</style>
